import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, Tree } from 'antd'
import "./role.css"
import {
    UnorderedListOutlined,
    DeleteOutlined
} from '@ant-design/icons';
import http from "../../../util/http"
const { confirm } = Modal;
export default function Role() {
    const columns = [{
        title: 'ID',
        dataIndex: 'id'
    }, , {
        title: '角色名称',
        dataIndex: 'roleName'
    }, {
        title: "操作",
        render: (item) => {
            return <div>

                <Button type="primary" shape="circle" icon={<UnorderedListOutlined />} style={{ marginRight: "10px" }}
                    onClick={() => {
                        setIsModalOpen(true)
                    }}
                />
                <Button type="primary" danger shape="circle" icon={<DeleteOutlined />}
                    onClick={() => remove(item)}
                />
            </div>
        }
    }]
    const [dataSource, setDataSourse] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false)
    const [rightList, setRightList] = useState([])
    useEffect(() => {
        http.get("/roles").then(res => {
            setDataSourse(res.data)
        })
    }, [])
    useEffect(() => {
        http.get("/rights?_embed=children").then(res => {
            setRightList(res.data)
        })
    }, [])
    /* 删除 */
    const remove = (item) => {
        confirm({
            title: '确定删除吗?',
            // icon: <ExclamationCircleOutlined />,
            // content: '请谨慎操作！！！',
            onOk() {
                del(item)
            },
            onCancel() {
                return
            },
        });
    }
    const del = (item) => {
        setDataSourse(dataSource.filter(data => data.id !== item.id))
    }
    const handleOk = () => {
        setIsModalOpen(false)
    }
    const handleCancel = () => {
        setIsModalOpen(false)
    }
    return (
        <div>
            <Table style={{ textAlign: "center" }}
                dataSource={dataSource}
                columns={columns}
                rowKey={dataSource => dataSource.id}
                pagination={{
                    pageSize: 3
                }}
            />
            <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Tree
                    checkable
                    treeData={rightList}
                />
            </Modal>
        </div>
    )
}
